<script setup>
import { ref ,onMounted} from 'vue'
import ResultTable from '@/components/ResultTable.vue'
import {deleteTransportLineTripsByIdAPI,getTransportLineTripsAPI} from '@/services/transportLine'
import editCarModel from './editCarModel.vue'
import arrangeCar from './arrangeCar.vue'
import { message, Modal } from 'ant-design-vue'
const props = defineProps({
  // 表格数据
  dataSource: {
    type: Array,
    default: () => [],
  },
  innerData:{
 type: Array,
  default: () => [],
  },
  // 分页总数
  total: {
    type: Number,
    default: 0,
  },
  // 表格加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  page: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
})

const emit = defineEmits(['change', 'update:page', 'update:pageSize', 'edit','del','car'])

// 表格数据 - 头部
const columns = ref([
  {
    title: '线路编号',
    dataIndex: 'number', // truckId
    key: 'number',
    width:100,
    align: 'center',
  },
  {
    title: '线路名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '线路类型',
    dataIndex: 'type',
    key: 'type',
    align: 'center',
  },
  {
    title: '起始地机构',
    dataIndex: 'startOrganName',
    key: 'startOrganName',
    align: 'center',
  },
  {
    title: '目的地机构',
    dataIndex: 'endOrganName',
    key: 'endOrganName',
  },
  {
    title: '距离(千米)',
    dataIndex: 'distance',
    key: 'distance',
    align: 'center',
  },
  {
    title: '成本(元)',
    dataIndex: 'cost',
    key: 'cost',
    align: 'center',
  },
  {
    title: '预计时间(分钟)',
    dataIndex: 'time',
    key: 'time',
    align: 'center',
  },
  {
    title: '操作',
    key: 'operation',
    align: 'center',
    width: 300,
    customCell: (record) => record, // ? 设置单元格属性
  },
])

// 表格数据
const onChange = ({ current, pageSize }) => {
  // 更新页码和页容量
  emit('update:page', current)
  emit('update:pageSize', pageSize)
  // 触发父组件的 change 事件
  emit('change', { page: current, pageSize: pageSize })
}

// 编辑
const onEdit = (id) => {
  // console.log(id)
  emit('edit', id)
}

//删除
const del=(id)=>{
  console.log(id)
 emit('del',id)
}

//新增车次
const addCar=(id)=>{
   emit('car',id)
}

//展开行数据
const expandLine = ref([
  {
    title: '车次名称',
    dataIndex: 'name', // truckId
    key: 'name',
    width:100,
    align: 'center',
  },
  {
    title: '发车频次',
    dataIndex: 'Time',
    key: 'Time',
     align: 'center',
  },
  {
    title: '到达时间',
    dataIndex: 'arriveTime',
    key: 'arriveTime',
    align: 'center',
  },
  {
    title: '车辆安排',
    dataIndex: 'truck',
    key: 'truck',
    align: 'center',
  },
    {
    title: '司机安排',
    dataIndex: 'driver',
    key: 'driver',
    align: 'center',
  },
   {
    title: '操作',
    key: 'operation',
    align: 'center',
    width: 300,
    customCell: (record) => record, // ? 设置单元格属性
  },
  
])
const params = ref({
  transportLineId:undefined
})

const innerData=ref([])
//展开行的变化
const expand= async(expanded,record)=>{
// console.log(expanded)
// console.log(record)
// console.log(record.id)
if(expanded===true){
  params.value.transportLineId=record.id
  const res = await getTransportLineTripsAPI(params.value)
  console.log(res)
  innerData.value= res.data
}
}

//编辑车次
const iseditCar= ref(false)
const editid = ref({})
const openEditCar=(id)=>{
  iseditCar.value=true
  editid.value=id
}


//安排车次
const arrId = ref('')


const arrange=ref(false)
const Car = (id)=>{
    arrange.value=true
    arrId.value=id


}
//删除车次
const delCar=async(id)=>{
   
   if (id) {
    Modal.confirm({
      title: '确认删除该数据吗',
      async onOk() {
        await deleteTransportLineTripsByIdAPI(id)
          const res = await getTransportLineTripsAPI(params.value)

  innerData.value= res.data
        message.success('删除成功')
      },
    })
  }
}



</script>

<template>
  <ResultTable
    :columns="columns"
    :data-source="dataSource"
    :page="page"
    :page-size="pageSize"
    :loading="loading"
    :total="total"
    @change="onChange"
    :showExpanded="true"
     @expand="expand"
  
  >
    <!-- 具名作用域插槽 -->
    <template #bodyCell="{ column, text, record }">
      <!-- 车辆状态 -->
      <template v-if="column.dataIndex === 'type'">
         <div class="table-column-status" :class="text === 1 ? '1' : (text === 2 ? '2' : '3')">
             {{ text === 1 ? '干线' : (text === 2 ? '支线' : '接驳路线') }}
           </div>
       </template>
      <!-- 操作 -->
      <template v-if="column.key === 'operation'">
   
        <a-button size="small" type="link" @click="onEdit(record.id)" >修改</a-button>
        <a-divider type="vertical" />
        <a-button  type="link" danger @click="del(record.id)">删除</a-button>
        <a-divider type="vertical" />
        <a-button size="small" type="link" @click="addCar(record.id)">增加车次</a-button>
      </template>   
    </template>

  <template #expandedRowRender>
      <ResultTable
        :columns="expandLine"
        :data-source="innerData"
       
      >
      <!-- 操作 -->
        <template #bodyCell="{ column, text, record }">
               <!-- 发车频次 -->
        <template v-if="column.key==='Time'">
          <div>{{ record.departureTime }} / {{ record.periodName}}</div>
        </template>
      <template v-if="column.key === 'operation'">
        <a-button size="small" type="link" @click="openEditCar(record.id)">编辑车次</a-button>
        <a-divider type="vertical" />
        <a-button  type="link" danger @click="delCar(record.id)">删除车次</a-button>
        <a-divider type="vertical" />
        <a-button size="small" type="link" @click="Car(record.id,record.name)">安排车辆</a-button>
      </template>   
  </template> 


      </ResultTable>
     
      </template>
  </ResultTable>
    <!-- 新增车次模态框 -->
  <addCarModel v-model:open="isOpenCar" :name="lineName" @ok="okCar"></addCarModel>
  <!-- 编辑车次 -->
     <editCarModel v-model:open="iseditCar"></editCarModel>
      <!-- 安排车辆 --> 
      <arrangeCar :id="arrId" v-model:open="arrange"></arrangeCar>
</template>
